<template>
	<view class="address-select-page">
		<!-- 地址列表容器 -->
		<uv-cell-group border="none">
			<view v-for="(item, index) in addressList" :key="item.id">
				<uv-cell layout="row" align="top" :border="index !== addressList.length - 1" class="custom-cell">
					<!-- 左侧内容：默认标签 + 姓名 + 电话 + 地址 -->
					<template #title>
						<view class="item">
							<view class="top">
								<view v-if="item.addressList" class="tag"><text>默认</text></view>
								<view class="name">{{item.receiverName}}</view>
								<view class="phone">{{item.mobilePhone}}</view>
							</view>
							<view class="bottom">
								{{item.region}} {{item.fullAddress}}
							</view>
						</view>
						
							<view class="right-content">
								<uv-checkbox v-model="item.isDefault" shape="circle" active-color="rgb(87, 176, 171)"
									size="20" class="mrdz">
									设为默认地址
								</uv-checkbox>
								<view class="icon-list">
									<uv-icon name="edit-pen" size="20" color="#999" @click="onEdit(item, index)"
										label='编辑'></uv-icon>
									<uv-icon name="trash-fill" size="20" color="#999" @click="onDelete(item, index)"
										label='删除'></uv-icon>
								</view>
						
							</view>
					</template>

					<!-- 右侧内容容器：包裹图标和多选框，设置在下方显示 -->
					<template #right-icon>
					</template>
				</uv-cell>
			</view>
		</uv-cell-group>
		<view class="logisticsInfo-cont">
			<!-- <view class="list-item-dd">
			<text class="item-ddbh font-weight-bold">
				配送地址
			</text>
		</view> -->
			<uv-button class='back-index' @click="goView('/pages/addres/index')" type="primary" color='#3AAFA9 '>
				<uv-icon name="plus-circle" size="20" color="#fff" style="margin-right: 10rpx;" class="icon"></uv-icon> 新增地址
			</uv-button>
		</view>
	</view>
	<uv-toast ref="toast"></uv-toast>
</template>

<script>
	export default {
		data() {
			return {
				addressList: [{
						receiverName: '蒙娜丽莎',
						mobilePhone: '18838129898',
						region: '浙江省 杭州市 ',
						fullAddress: '笕驾坡街道阳光小区菜鸟驿站',
						isDefault: true,
					},
					{
						receiverName: '蒙娜丽莎',
						mobilePhone: '18838129898',
						region: '浙江省 杭州市 ',
						fullAddress: '笕驾坡街道阳光小区菜鸟驿站',

					}, {
						receiverName: '蒙娜丽莎',
						mobilePhone: '18838129898',
						region: '浙江省 杭州市 ',
						fullAddress: '笕驾坡街道阳光小区菜鸟驿站',

					},
				],
				isType: ''
			}
		},
		methods: {
			// 跳转页面
			goView(view, data) {
				uni.navigateTo({
					url: view,
					params: data
				})
			},
			onEdit(item, index) {
				console.log(item, index)
				let keyList = Object.keys(item)
				uni.navigateTo({
					url: `/pages/addres/nzdz?type=edit&${keyList.map(items => `${items}=${item[items]}`).join('&')}`
				})
			}
		}
	}
</script>
<style>
	.address-select-page .uv-line {
		border: none !important;
	}
</style>
<style lang="scss">
	.address-select-page {
		background-color: #fff;
		min-height: 100vh;
		.icon-list {
			display: flex;
			
		}
		/* 修复右侧内容不显示的核心样式 */
		.custom-cell {
			/* 确保cell有足够高度容纳上下内容 */
			min-height: 120px;
			padding: 10px 0;
		}

		/* 右侧内容容器：纵向排列并显示 */
		.right-content {
			/* 关键：设置为块级元素，确保内容显示 */
			display: flex;
			// flex-direction: column;
			/* 纵向排列 */
			gap: 8px;
			/* 元素间距 */
			// align-items: ;
			justify-content: space-between;
			/* 右对齐，与左侧内容呼应 */
			/* 避免被挤压：设置最小宽度 */
			min-width: 120px;
			/* 确保不被隐藏 */
			overflow: visible;
		}

		/* 图标带文字时的样式调整（避免文字重叠） */
		.uv-icon {
			display: flex;
			align-items: center;
			gap: 4px;
		}

		.logisticsInfo-cont {
			padding: px2vw(12);
			// background: #ffffff;
			position: fixed;
			bottom: 0;
			left: 2.5%;
			width: 95%;
			box-sizing: border-box;
			// display: flex;
			// align-items: center;
			.list-item-dd {
				margin-bottom: px2vw(12);
			}

			uni-button {
				border-radius: px2vw(6);
				width: 100%;
				box-sizing: border-box;
				height: px2vw(40);

				uni-text {
					font-size: px2vw(14) !important;
					margin-left: px2vw(4);
				}
			}
		}



		.item {
			.top {
				display: flex;
				margin: 10px;

				.name {
					font-size: 14px;
					font-weight: 600;
					margin-right: 20px;
				}

				.phone {
					font-size: 14px;
					font-weight: 600;
				}

				.tag {
					background-color: rgb(96, 99, 126);
					background: linear-gradient(135deg, #5a5d78, #737795, #42455e);
					color: #fff;
					font-size: 10px;
					font-weight: 600;
					padding: 4rpx;
					margin-right: 10px;
					border-radius: 10rpx;
				}
			}

			.bottom {
				color: #a8a8a8;
				font-size: 12px;
				margin-left: 20rpx;
				margin-bottom: 30rpx;
			}
		}

		/* 编辑图标颜色 */
		.uv-icon {
			color: #999;
			margin-left: 20rpx;
			/* 与右侧内容间距 */
		}

		.icon {

			color: #fff !important;

		}
	}
</style>